waves.views.BeachList = Ext.extend(Ext.Panel, {
    layout: 'card',

    initComponent: function() {
        
        this.list = new Ext.List({
			fullscreen: true,
			itemTpl : '{Name}',
			grouped : true,
			indexBar: false,
			store: waves.BeachStore,
            listeners: {
                selectionchange: {fn: this.onSelect, scope: this}
            }
        });
		
		this.listpanel = new Ext.Panel({
            layout: 'fit',
            items: this.list,
            listeners: {
                activate: { fn: function(){
                    this.list.getSelectionModel().deselectAll();
                }, scope: this }
            }
        });
        
        this.items = this.listpanel;
             
        waves.views.BeachList.superclass.initComponent.call(this);
    },
    
    onSelect: function(sel, records){
        if (records[0] !== undefined) {
           var bioCard = new waves.views.BeachDetail({
                prevCard: this.listpanel,
                record: records[0]
            });
            
            this.setActiveItem(bioCard, 'slide');
        }
    }
});

Ext.reg('beachlist', waves.views.BeachList);

waves.views.BeachDetail = Ext.extend(Ext.Panel, {
    scroll: 'vertical',
	fullscreen: true,
	
    initComponent: function(){
        this.dockedItems = [{
            xtype: 'toolbar',
            title: this.record.data.Name,
            items: [{
                ui: 'back',
                text: 'Back',
                scope: this,
                handler: function(){
                    this.ownerCt.setActiveItem(this.prevCard, {
                        type: 'slide',
                        reverse: false,
                        scope: this,
                        after: function(){
                            this.destroy();
                        }
                    });
                }
            }]
        }];
	
        
	    this.chart = new Ext.chart.Panel({
            title: 'Gr&#225;fico de ondula&#231;&#227;o',
			height: 200,
			items: {
				store: waves.GraphStore,
				axes: [{
					type: 'Numeric',
					position: 'left',
					fields: ['wave'],
					title: 'Altura'
				}, {
					type: 'Time',
					position: 'bottom',
					fields: ['date'],
					dateFormat: ' M d ',
					label: {
						rotate: {
							degrees: 45
						}
					}
				}],
				series: [{
					type: 'line',
					showMarkers: false,
					fill: true,
					axis: 'left',
					xField: 'date',
					yField: 'wave'
				}]
			}
		});
		
		this.list = new Ext.List({
            itemTpl: new Ext.XTemplate('<div><img src="{profile_image_url}"/>&nbsp<b>{from_user}</b><br />{text:this.linkify}</div>', {
                linkify: function(value) {
                    return value.replace(/(http:\/\/[^\s]*)/g, "<a href=\"$1\">$1</a>");
                }
            }),
            loadingText: false,
            store: new Ext.data.Store({
                model: 'Tweet',
                proxy: {
                    type: 'scripttag',
                    url : 'http://search.twitter.com/search.json',
                    reader: {
                        type: 'json',
                        root: 'results'
                    }
                }
            })
        });
        
	
		this.items = [this.chart, this.list];
	
		this.list.on('afterrender', this.loadStore, this);
		
        waves.views.BeachDetail.superclass.initComponent.call(this);
    },
    
	loadStore: function(){
        this.list.el.mask('<span class="top"></span><span class="right"></span><span class="bottom"></span><span class="left"></span>', 'x-spinner', false);
        
        this.list.store.load({
            params: {
                q: this.record.data.Hashtag,
                rpp: 20
            },
            callback: function(data){
                this.list.el.unmask();
            },
            scope: this
        });       
    }	
});

Ext.reg('beachdetail', waves.views.BeachDetail);
